<template>
  <div class="con fl">
    <div class="img">
      <a-checkbox v-model="itemData.isSel" class="checkbox" @change="selItem" />
      <a-image fit="contain" width="210px" height="210px" :src="getImgUrl()">
        <template #error>
          <img style="width: 100%; height: 100%" src="https://cdn2.selleroa.com/saas/product/118310735721069569.png" alt="" />
        </template>
      </a-image>
      <div class="setting-con" @click.stop="operate('detail')">
        <div class="btn-con">
          <!-- <span @click="operate('detail')">查看详情</span>
          <span @click="operate('edit')">编辑</span>
          <span @click="operate('del')">删除</span> -->
          <!-- <span @click="operate('showImg')">查看图片</span> -->

          <div class="img-con" @click.stop="operate('edit')" v-if="$authPass('product.packing.saveOrUpdate')">
            <a-popover position="right">
              <icon-pen />
              <template #content> 编辑 </template>
            </a-popover>
          </div>
          <div class="img-con" @click.stop="operate('del')" v-if="$authPass('product.packing.del')">
            <a-popover position="right">
              <icon-delete />
              <template #content> 删除 </template>
            </a-popover>
          </div>
          <!-- <div class="img-con" @click.stop="operate('log')">
            <a-popover>
              <icon-bookmark />
              <template #content> 操作日志 </template>
            </a-popover>
          </div> -->
        </div>
      </div>
    </div>
    <div class="title">
      <TextLimit position="top" :rows="2">{{ itemData.skuName }}</TextLimit>
    </div>
    <div class="flag">
      <div class="text">
        <TextLimit position="top" :rows="1">{{ itemData.sku }}</TextLimit>
      </div>
      <div class="tag">
        <span class="category-name">{{ itemData.skuType == 'FITTING' ? '配件' : '包装' }}</span>
      </div>
    </div>
    <div class="footer">
      <div class="bd" style="color: #999999">
        <icon-clock-circle />
        <span>{{ dayjs(itemData.gmtCreate).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed } from 'vue'
  import dayjs from 'dayjs'
  export default defineComponent({
    name: 'Item',
    props: ['item', 'type'],
    setup(props, { emit }) {
      let itemData: any = computed({
        set(val) {
          emit('update:item', val)
        },
        get() {
          return props.item
        },
      })

      const operate = (type: string) => {
        emit('opreate', type)
      }

      const selItem = () => {
        emit('sel')
      }
      const getImgUrl = () => {
        let productPicList = props.item.productPicList || []
        return productPicList[0] ? productPicList[0].url : ''
      }
      return {
        itemData,
        dayjs,
        operate,
        selItem,
        getImgUrl,
      }
    },
  })
</script>

<style lang="less" scoped>
  .checkbox {
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 2;
  }

  .con {
    width: 210px;
    // height: 300px;
    background-color: #fff;
    box-shadow: 0 0 4px 1px #eee;
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;

    .img {
      width: 210px;
      // height: 210px;
      position: relative;
      transition: transform 0.2s linear;
      &:hover .setting-con {
        z-index: 1;
        display: block;
      }
      // &:hover .arco-image-img {
      //   transform: scale(1.1);
      // }
      .setting-con {
        width: 100%;
        height: 100%;
        position: absolute;
        cursor: pointer;
        left: 0;
        top: 0;
        display: none;
        // background: rgba(105, 105, 105, 0.8);
        .btn-con {
          // border: 1px solid white;
          width: 30px;
          // height: 80px;
          position: absolute;
          top: 5px;
          right: 10px;

          .img-con {
            background: rgba(105, 105, 105, 0.8);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 32px;
            margin-bottom: 5px;
            color: white;
            font-size: 18px;
          }
        }
      }
    }

    .title {
      height: 36px;
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 12px;
      color: #515a6e;
      font-weight: 400;
      padding: 0 3px;
      box-sizing: border-box;
      cursor: pointer;
    }
    .flag {
      height: 30px;
      display: flex;
      justify-content: space-between;
      padding: 0 5px;
      box-sizing: border-box;
      .text {
        width: 150px;
        overflow: hidden;
        color: #999999;
        font-size: 12px;
        line-height: 30px;
        cursor: pointer;
        margin-top: 5px;
      }
      .tag {
        font-size: 12px;
        // padding: 0 5px;
        // box-sizing: border-box;
        span {
          margin-top: 4px;
          display: inline-block;
          padding: 2px 4px;
          box-sizing: border-box;
          border-radius: 3px;
        }
        .category-name {
          background-color: #d8f0ea;
          color: #059794;
        }

        .is-stop {
          background-color: #ececec;
          color: #686868;
          margin-right: 5px;
        }

        .group {
          background-color: #f0e3d8;
          color: #f9939b;
          margin-right: 5px;
        }

        .list-num {
          margin-left: 10px;
          background-color: #efebfe;
          color: #6c648b;
        }
      }
    }

    .footer {
      border-top: 1px solid #dadde2;

      .bd {
        font-size: 12px;
        margin: 5px;
        box-sizing: border-box;
      }
    }
  }
</style>
